<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <!-- 虚拟dom:用js对象描述真实dom的结构 -->
    <!-- 表达式 -->
    {{ message }}
  </div>

  <script>


    //冻结

    var vm = new Vue({
      //选项
      // el: "#app",
      //响应式的数据
      data: {
        message: "helloworld"
      },
      created() {
        //发送ajax数据请求，原因：最早可以获取到data里面的数据
        console.log('created:', this.message)
      },
      beforeCreate() {
        console.log('beforeCreate:', this.message)
      },
      beforeMount() {
        console.log('beforeMount:', document.getElementById('app').innerHTML)
      },
      mounted() {
        console.log('mounted:', document.getElementById('app').innerHTML)
        setTimeout(() => {
          this.message = "太原2002"
          //执行销毁之后，后面不支持响应式
          this.$destroy();
        }, 2000)
      },
      //第一加载数据数据不执行
      beforeUpdate() {
        console.log('beforeUpdate:', this.message)
      },
      //第一加载数据数据不执行
      updated() {
        console.log('updated:', this.message)
      },
      beforeDestroy(){
        console.log('beforeDestroy:', this.message)
      },
      destroyed(){
        console.log('destroyed:', this.message)
      }

    }).$mount("#app")



  </script>

</body>

</html>